<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<h:html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8" />
	<title>SmartShop</title>
	<meta name="robots" content="index, follow" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="author" content="" />

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport"
		content="width=device-width, initial-scale=1, maximum-scale=1" />


	<!-- CSS
  ================================================== -->
	<h:outputStylesheet library="styles" name="skeleton.css"></h:outputStylesheet>
	<h:outputStylesheet library="styles" name="style.css"></h:outputStylesheet>
	<h:outputStylesheet library="styles" name="color.css"></h:outputStylesheet>
	<h:outputStylesheet library="styles" name="layout.css"></h:outputStylesheet>
	<h:outputStylesheet library="styles" name="inner.css"></h:outputStylesheet>

	<link href='../../fonts.googleapis.com/css@family=Droid+Sans_3A400,700'
		rel='stylesheet' type='text/css' />
	<!--[if lt IE 9]>
		<script src="../../html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Demo Switcher
	================================================== -->
	<link id="layoutcss" href="styles/fixed-layout.css" rel="stylesheet"
		type="text/css" />
	<link href="styles/style-switcher.css" rel="stylesheet" type="text/css" />

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico" />
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
	<link rel="apple-touch-icon" sizes="72x72"
		href="images/apple-touch-icon-72x72.png" />
	<link rel="apple-touch-icon" sizes="114x114"
		href="images/apple-touch-icon-114x114.png" />

</h:head>


<h:body>
	<div id="bodychild">
		<div id="outercontainer">

			<!-- HEADER -->
			<div id="outerheader">
				<div class="container">
					<header id="top" class="twelve columns">
					<div id="logo" class="three columns alpha">
						<a href="index.html"> <h:graphicImage library="images"
								name="logo.png" />
						</a>
					</div>
					<div id="headerright" class="six columns omega">
						<div id="chart">
							<a href="#" id="shop-bag"></a>
							<ul class="shop-box">
								<li><h:graphicImage library="images"
										name="content/product/small.jpg" />

									<h2>Smart Strip Armchair</h2>
									<div class="price">1 x $120</div></li>
								<li>
									<div class="total">Subtotal: $120</div> <a href="#"
									class="button">View Cart</a> <a href="#" class="button">Checkout</a>
									<div class="clear"></div>
								</li>
							</ul>

							<h6>Shopping Cart</h6>
							<p>You have no items in your shopping cart</p>
						</div>
						<ul id="user-nav">
							<li><a href="account.html">My Account</a></li>
							<li><a href="login.html">My Wishlist</a></li>
							<li><a href="cart.html">My Cart</a></li>
							<li><a href="checkout.html">Checkout</a></li>
							<li><a href="login.html">Login</a></li>
						</ul>
					</div>

					<section id="navigation" class="twelve columns"> <nav
						id="nav-wrap">
					<ul id="topnav" class="sf-menu">
						<li><a href="index.html">Home</a></li>
						<li><a href="about.html">About</a>
							<ul>
								<li><a href="element.html">Elements</a></li>
								<li><a href="single.html">Blog Details</a></li>
								<li><a href="sidebar-left.html">Sidebar Left</a></li>
								<li><a href="#">Dropdown</a>
									<ul>
										<li><a href="#">Only</a></li>
										<li><a href="single.html">Example of</a></li>
										<li><a href="#">The Dropdown</a></li>
									</ul></li>
							</ul></li>
						<li><a href="products.html">Products</a>
							<ul>
								<li><a href="products.html">Category</a></li>
								<li><a href="product-details.html">Product Details</a></li>
								<li><a href="account.html">My Account</a></li>
								<li><a href="cart.html">My Cart</a></li>
								<li><a href="checkout.html">Checkout</a></li>
								<li><a href="login.html">Login</a></li>
							</ul></li>
						<li class="current"><a href="blog.html">Blog</a></li>
						<li><a href="portfolio.html">Portfolio</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
					<!-- topnav --> </nav><!-- nav -->

					<form method="get" id="searchform" action="#">
						<div class="bgsearch">
							<input type="text" name="s" id="s" value="" /> <input
								type="submit" class="searchbutton" value="" />
						</div>
					</form>

					<div class="clear"></div>
					</section>
					<div class="clear"></div>
					</header>
				</div>
			</div>
			<!-- END HEADER -->

			<!-- BEFORE CONTENT -->
			<div id="outerbeforecontent">
				<div class="container">
					<section id="beforecontent" class="twelve columns">
					<h1 class="pagetitle">Our Blog</h1>
					<div class="clear"></div>
					</section>
				</div>
			</div>
			<!-- END BEFORE CONTENT -->

			<!-- MAIN CONTENT -->
			<div id="outermain">
				<div class="container">
					<section id="maincontent" class="twelve columns"> <section
						id="content" class="positionleft nine columns alpha">
					<div class="padcontent">

						<article class="post">
						<h2 class="posttitle">
							<a href="single.html">Pellentesque ac ante arcu. Mauris quis
								nunc velit.</a>
						</h2>
						<div class="entry-utility">
							Posted by <a href="#">Templatesquare</a> on May 16, 2012 / <a
								href="#">0 Comment</a>
						</div>
						<div class="postimg">
							<h:graphicImage library="images" name="content/post1.jpg" />
						</div>
						<div class="entry-content">
							<p>Aliquam luctus rhoncus eros, non malesuada nunc
								consectetur a. Donec tristique rhoncus libero vitae cursus.
								Morbi commodo, massa non lobortis rutrum, tortor risus viverra
								augue, et vehicula quam quam molestie ante. Donec ac eleifend
								turpis. Duis est ipsum, bibendum at semper sit amet, bibendum id
								tellus. Aenean aliquam erat nec lectus ultrices eleifend. Etiam
								ac diam tortor, vel vulputate ante.</p>
							<a href="single.html" class="button">Read more</a>

							<div class="clearfix"></div>
						</div>
						</article>

						<article class="post">
						<h2 class="posttitle">
							<a href="single.html">Pellentesque ac ante arcu. Mauris quis
								nunc velit.</a>
						</h2>
						<div class="entry-utility">
							Posted by <a href="#">Templatesquare</a> on May 16, 2012 / <a
								href="#">0 Comment</a>
						</div>
						<div class="postimg">
							<h:graphicImage library="images" name="content/post2.jpg"
								class="scale-with-grid" />

						</div>
						<div class="entry-content">
							<p>Aliquam luctus rhoncus eros, non malesuada nunc
								consectetur a. Donec tristique rhoncus libero vitae cursus.
								Morbi commodo, massa non lobortis rutrum, tortor risus viverra
								augue, et vehicula quam quam molestie ante. Donec ac eleifend
								turpis. Duis est ipsum, bibendum at semper sit amet, bibendum id
								tellus. Aenean aliquam erat nec lectus ultrices eleifend. Etiam
								ac diam tortor, vel vulputate ante.</p>
							<a href="single.html" class="button">Read more</a>

							<div class="clearfix"></div>
						</div>
						</article>

						<article class="post">
						<h2 class="posttitle">
							<a href="single.html">Pellentesque ac ante arcu. Mauris quis
								nunc velit.</a>
						</h2>
						<div class="entry-utility">
							Posted by <a href="#">Templatesquare</a> on May 16, 2012 / <a
								href="#">0 Comment</a>
						</div>
						<div class="postimg">
							<h:graphicImage library="images" name="content/post3.jpg"
								class="scale-with-grid" />
						</div>
						<div class="entry-content">
							<p>Aliquam luctus rhoncus eros, non malesuada nunc
								consectetur a. Donec tristique rhoncus libero vitae cursus.
								Morbi commodo, massa non lobortis rutrum, tortor risus viverra
								augue, et vehicula quam quam molestie ante. Donec ac eleifend
								turpis. Duis est ipsum, bibendum at semper sit amet, bibendum id
								tellus. Aenean aliquam erat nec lectus ultrices eleifend. Etiam
								ac diam tortor, vel vulputate ante.</p>
							<a href="single.html" class="button">Read more</a>

							<div class="clearfix"></div>
						</div>
						</article>

						<div class="pagenavi">
							<a href="#" class="page">1</a><span class="current">2</span><a
								href="#" class="page">3</a><a href="#" class="next">Next
								Page</a>
						</div>

					</div>
					</section> <aside id="sidebar" class="positionright three columns omega">
					<ul>
						<li class="widget-container">
							<h2 class="widget-title">Categories</h2>
							<ul>
								<li><a href="#">Limited Edition</a><span>15</span></li>
								<li><a href="#">On Sale</a><span>27</span></li>
								<li><a href="#">New Product</a><span>10</span></li>
								<li><a href="#">Furniture</a><span>23</span></li>
								<li><a href="#">Electronic</a><span>25</span></li>
								<li><a href="#">Other</a><span>70</span></li>
							</ul>
						</li>
						<li class="widget-container">
							<h2 class="widget-title">Text Widget</h2>
							<div class="textwidget">Pellentesque at mauris fringilla
								nunc sollicitudin vehicula. Aliquam et nibh ipsum, vel porta
								augue. Sed dolor ligula, facilisis.</div>
						</li>
						<li class="widget-container">
							<h2 class="widget-title">Latest Product</h2>
							<ul class="lp-widget">
								<li><h:graphicImage library="images"
										name="content/product/small-img1.jpg"
										class="alignleft imgborder" />
									<h3>
										<a href="product-details.html">Smart Strip Armchair</a>
									</h3>
									<div class="price">$120.00</div>
									<div class="clear"></div></li>
								<li><h:graphicImage library="images"
										name="content/product/small-img2.jpg"
										class="alignleft imgborder" />

									<h3>
										<a href="roduct-details.html">Smart Chair</a>
									</h3>
									<div class="price">$200.00</div>
									<div class="clear"></div></li>
								<li><h:graphicImage library="images"
										name="content/product/small-img3.jpg"
										class="alignleft imgborder" />
									<h3>
										<a href="roduct-details.html">Smart Camera SLR</a>
									</h3>
									<div class="price">$120.00</div>
									<div class="clear"></div></li>
							</ul>
						</li>
						<li class="widget-container">
							<div class="textwidget">
								<h:graphicImage library="images" name="content/banner.gif"
									class="scale-with-grid" />

							</div>
						</li>
						<li class="widget-container">
							<h2 class="widget-title">Top Rated Product</h2>
							<ul class="lp-widget">
								<li><h:graphicImage library="images"
										name="content/product/small-img1.jpg"
										class="alignleft imgborder" />

									<h3>
										<a href="roduct-details.html">Smart Strip Armchair</a>
									</h3>
									<div class="price">$120.00</div>
									<div class="star">
										<h:graphicImage library="images" name="content/star.png" />
										<h:graphicImage library="images" name="content/star.png" />
										<h:graphicImage library="images" name="content/star.png" />
									</div>
									<div class="clear"></div></li>
								<li><h:graphicImage library="images"
										name="content/product/small-img2.jpg"
										class="alignleft imgborder" />
									<h3>
										<a href="roduct-details.html">Smart Chair</a>
									</h3>
									<div class="price">$200.00</div>
									<div class="star">
										<h:graphicImage library="images" name="content/star.png" />
										<h:graphicImage library="images" name="content/star.png" />
										<h:graphicImage library="images" name="content/star.png" />
										<h:graphicImage library="images" name="content/star.png" />
									</div>
									<div class="clear"></div></li>
								<li><h:graphicImage library="images"
										name="content/product/small-img3.jpg"
										class="alignleft imgborder" />
									<h3>
										<a href="roduct-details.html">Smart Camera SLR</a>
									</h3>
									<div class="price">$120.00</div>
									<div class="star">
										<h:graphicImage library="images" name="content/star.png" />
										<h:graphicImage library="images" name="content/star.png" />
										<h:graphicImage library="images" name="content/star.png" />
										<h:graphicImage library="images" name="content/star.png" />
									</div>
									<div class="clear"></div></li>
							</ul>
						</li>
					</ul>
					</aside>

					<div class="clear"></div>
					<!-- clear float --> </section>
				</div>
			</div>
			<!-- END MAIN CONTENT -->

			<!-- FOOTER SIDEBAR -->
			<div id="outerfootersidebar">
				<div class="container">
					<div id="footersidebarcontainer" class="twelve columns">
						<footer id="footersidebar">
						<div id="footcol1" class="three columns alpha">
							<ul>
								<li class="widget-container">
									<h2 class="widget-title">Recent Post</h2>
									<ul class="ts-recent-post-widget">
										<li><h:graphicImage library="images" name="content/rp1.jpg" />
											<h3>
												<a href="#">Page Title</a>
											</h3> <span>Pellentesque ac ante arcu. Mauris quis nunc et.</span>
											<div class="clear"></div></li>
										<li><h:graphicImage library="images" name="content/rp2.jpg" />
											<h3>
												<a href="#">Page Title</a>
											</h3> <span>Pellentesque ac ante arcu. Mauris quis nunc et.</span>
											<div class="clear"></div></li>
										<li><h:graphicImage library="images" name="content/rp3.jpg" />
											<h3>
												<a href="#">Page Title</a>
											</h3> <span>Pellentesque ac ante arcu. Mauris quis nunc et.</span>
											<div class="clear"></div></li>
									</ul>
								</li>
							</ul>
						</div>
						<div id="footcol2" class="three columns">
							<ul>
								<li class="widget-container">
									<h2 class="widget-title">Latest Tweet</h2>
									<div id='userandquery' class="query"></div>
								</li>
							</ul>
						</div>
						<div id="footcol3" class="three columns">
							<ul>
								<li class="widget-container">
									<h2 class="widget-title">Our Gallery</h2>
									<div class="gallery-pic">
										<a href="#"><h:graphicImage library="images" name="content/small-g1.jpg" /></a>
										<a href="#"><h:graphicImage library="images" name="content/small-g2.jpg" /></a>
										<a href="#"><h:graphicImage library="images" name="content/small-g3.jpg" /></a>
										<a href="#"><h:graphicImage library="images" name="content/small-g4.jpg" class="nomargin" /></a>
										<a href="#"><h:graphicImage library="images" name="content/small-g5.jpg" /></a>
										<a href="#"><h:graphicImage library="images" name="content/small-g6.jpg" /></a>
										<a href="#"><h:graphicImage library="images" name="content/small-g7.jpg" /></a>
										<a href="#"><h:graphicImage library="images" name="content/small-g8.jpg" class="nomargin"/></a>
											
									</div>
									<div class="clear"></div>
								</li>
							</ul>
						</div>
						<div id="footcol4" class="three columns omega">
							<ul>
								<li class="widget-container">
									<h2 class="widget-title">SmartShop</h2>
									<p>Pellentesque ac ante arcu. Mauris quis nunc velit.
										Praesent hendrerit bibendum libero, vitae fermentum eros
										bibendum eget. Morbi molestie volutpat elementum.</p>
									<p>Etiam at erat tortor. Etiam vel ipsum eros. Lorem ipsum
										dolor sit amet, consectetur adipiscing elit. Aliquam eu ligula
										metus, eu gravida lorem.</p>
								</li>
							</ul>
						</div>
						<div class="clear"></div>
						</footer>

					</div>
				</div>
			</div>
			<!-- END FOOTER SIDEBAR -->

			<!-- FOOTER -->
			<div id="outerfooter">
				<div class="container">
					<div id="footercontainer" class="twelve columns">
						<footer id="footer">Copyright &copy;2012 SmartShop. All
						Rights Reserved . Theme design by <a
							href="../../templatesquare.com/default.htm">TemplateSquare.com</a></footer>
						<ul class="sn">
							<li><a href="../../pinterest.com/default.htm"
								title="Pinterest"><span class="icon-img"
									style="background: url(images/social/pinterest.png)"></span></a></li>
							<li><a href="../../plus.google.com/default.htm"
								title="Google Plus"><span class="icon-img"
									style="background: url(images/social/gplus.png)"></span></a></li>
							<li><a href="../../facebook.com/default.htm"
								title="Facebook"><span class="icon-img"
									style="background: url(images/social/facebook.png)"></span></a></li>
							<li><a href="../../twitter.com/default.htm" title="Twitter"><span
									class="icon-img"
									style="background: url(images/social/twitter.png)"></span></a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- END FOOTER -->

		</div>
		<!-- end bodychild -->
	</div>
	<!-- end outercontainer -->

	<!-- ////////////////////////////////// -->
	<!-- //      Javascript Files        // -->
	<!-- ////////////////////////////////// -->
	
	<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

	<!-- jQuery Superfish -->
	<script type="text/javascript" src="js/hoverIntent.js"></script>
	<script type="text/javascript" src="js/superfish.js"></script>
	<script type="text/javascript" src="js/supersubs.js"></script>


	<!-- jQuery Dropdown Mobile -->
	<script type="text/javascript" src="js/tinynav.min.js"></script>

	<!-- Custom Script -->
	<script type="text/javascript" src="js/custom.js"></script>

	<!-- Twitter Script -->
	<script type="text/javascript" src="js/jquery.tweet.js"></script>

	<script type="text/javascript">
		jQuery(document).ready(function() {
			//Twitter
			jQuery("#userandquery").tweet({
				count : 2,
				username : "templatesquare",
				loading_text : "searching twitter..."
			});
		});
	</script>

	<!-- Demo Switcher -->
	<script type="text/javascript" src="js/jquery.cookie.js"></script>
	<script type="text/javascript" src="js/switcher.js"></script>

</h:body>
</h:html>
